<template>
    <div class="common-layout">
        <el-row>
            <el-select v-model="state.selected" class="m-2" placeholder="月份" 
            @change="change"
            size="large">
                <el-option v-for="item in state.options" :key="item" :label="item" :value="item" />
            </el-select>
        </el-row>

        <el-row>
            <el-table :data="state.tableDataDisplay" 
            :cell-class-name="tableColumnClassName"
            @sort-change="sortChange"
            :default-sort="state.sort"
            @header-click="tableHeaderClick"
            style="width: 100%" height="800">
                <el-table-column prop="date" fixed label="Date" width="120" sortable/>
                <el-table-column 
                    v-for="stock in state.stocks" width="120"
                    :key="stock" 
                    :prop="stock" 
                    :label="stock" sortable/>
            </el-table>
        </el-row>
    </div>
</template>
  
<script setup>
import { reactive } from 'vue'
import { openNewTableWeekDetail } from '../router'


const prop = defineProps({
    data: [],
})

const base = "IndustryMonthPctDetail"
const sortPropKey = base + "SortProp"
const sortOrderKey = base + "SortOrder"

const state = reactive({
    data: [],
    raw_data: null,
    tableDataRaw: [],
    tableDataDisplay: [],
    stocks: [],
    options: ["01","02","03","04","05","06","07","08","09","10","11","12"],
    sort: { 
        prop: sessionStorage.getItem(sortPropKey) || 'date' , 
        order: sessionStorage.getItem(sortOrderKey) || 'descending' 
    },
})

const sortChange = (column, prop, order) => {
    sessionStorage.setItem(sortPropKey, column.prop)
    sessionStorage.setItem(sortOrderKey, column.order)
}

const bulitData = (data) => {
    console.log(data)
    state.raw_data = data
    state.stocks = Object.keys(state.raw_data)

    // 最大记录数
    let maxRecord = 0
    let maxStock = ''
    state.stocks.forEach(stock => {
        if (maxRecord < state.raw_data[stock].length) {
            maxRecord = state.raw_data[stock].length
            maxStock = stock
        }
    })

    let tableDataMap = new Map()
    // 设置初始值
    state.raw_data[maxStock].forEach(item => {
        let tmp = {} 
        tmp['date'] = item.date 
        state.stocks.forEach(stock => {
            tmp[stock] = null
        })
        tableDataMap.set(item.date,  tmp)
    })

    state.stocks.forEach(stock => {
        state.raw_data[stock].forEach(item => {
            tableDataMap.get(item.date)[stock] = item.monthPct
        })
    })
    state.tableDataRaw = Array.from(tableDataMap.values())
    state.tableDataDisplay = state.tableDataRaw
}

bulitData(prop.data)

const tableColumnClassName = ({row, column, rowIndex, columnIndex}) => {

    let cell = column.label
    let pct = row[cell]
    if (pct && pct < 0) {
        return 'lt0-cell'
    }
}

const tableHeaderClick = (column, event) => {
    let stock = column.property
    openNewTableWeekDetail(stock)
}

const change = () => {
    state.tableDataDisplay = state.tableDataRaw.filter(item => item.date.endsWith(state.selected))
}
</script>

<style scope>
</style>